<script setup>
import {ref} from "vue";
import { pcaTextArr } from "element-china-area-data";
import request  from '@/api/request'

let emits=defineEmits(["ref-table"])
let customerResources=ref({customerResourcesCustomerSegmentation:"一级",customerResourcesCustomerTags:"gs",customerResourcesSettlementPeriod:"月结"})
let form=ref()
let User=ref([])

let onSubmit=()=>{
   
    customerResources.value.customerResourecsAddress = customerResources.value.customerResourecsAddress.toString()
    customerResources.value.customerResourcesId = 'CUST-' + new Date().getTime()
        request({
            url:"/CustomerResources",
            method:"post",
            data:customerResources.value
        }).then(res=>{
            emits("ref-table")
        })
}

let location=()=>{
    request({
            url:"/system/user/list",
            method:"post",
            data:{
                current:1,
                size:1000
            }
        }).then(res=>{
            User.value=res.data.records
        })
}
location();
</script>
<template>
    <div>
        <el-card>
            <template #header>
                <el-form :model="customerResources" ref="form" :inline="false" class="card_wrap">
                    <el-form-item label="客户名称："  prop="customerResourcesName" class="c_item">
                            <el-input v-model="customerResources.customerResourcesName" style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="客户分类：" prop="customerResourcesCustomerSegmentation" class="c_item">
                            <el-select placeholder="客户分类" v-model="customerResources.customerResourcesCustomerSegmentation" style="width: 150px;">
                                <el-option value="一级" label="一级"></el-option>
                                <el-option value="二级" label="二级"></el-option>
                                <el-option value="三级" label="三级"></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="客户来源：" prop="customerResourcesCustomerSource" class="c_item">
                            <el-input v-model="customerResources.customerResourcesCustomerSource" placeholder="请输入客户来源" style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="客户标签：" prop="customerResourcesCustomerTags" class="c_item">
                            <el-select placeholder="客户分类" v-model="customerResources.customerResourcesCustomerTags" style="width: 150px;">
                                <el-option value="gs" label="公司"></el-option>
                                <el-option value="sr" label="私人"></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="结算期限：" prop="customerResourcesSettlementPeriod" class="c_item">
                            <el-select placeholder="结算期限" v-model="customerResources.customerResourcesSettlementPeriod" style="width: 150px;">
                                <el-option value="月结" label="月结"></el-option>
                                <el-option value="季结" label="季结"></el-option>
                                <el-option value="现结" label="现结"></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="信用额度/元：" prop="customerResourcesCreditLimit" class="c_item">
                            <el-input-number v-model="customerResources.customerResourcesCreditLimit" :min="1" :max="1000000"/>
                    </el-form-item>
                    <el-form-item label="销售负责人：" prop="customerResourcesHeadOfSales" class="c_item">
                            <el-select placeholder="负责人" v-model="customerResources.customerResourcesHeadOfSales" style="width: 150px;">
                                <el-option v-for="item in User" :label="item.nickname" :value="item.id">
                                </el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="地址：" prop="customerResourecsAddress" class="c_item">
                            <el-cascader :options="pcaTextArr" clearable filterable v-model="customerResources.customerResourecsAddress"></el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="customerResourcesFulladdress" class="c_item">
                        <el-input v-model="customerResources.customerResourcesFulladdress" placeholder="请输入详细地址xx街道xx号" style="width:100%;"></el-input>
                    </el-form-item>
                    <el-form-item style="width:400px">
                    </el-form-item>
                    <el-form-item label="联系人（对接人）名称：" prop="customerResourcesContact" class="c_item">
                        <el-input v-model="customerResources.customerResourcesContact" placeholder="请输入联系人名称" style="width:150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人电话：" prop="customerResourcesContactPhone" class="c_item">
                        <el-input v-model="customerResources.customerResourcesContactPhone" placeholder="请输入联系人电话" style="width:150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人岗位：" prop="customerResourcesContactPosition" class="c_item">
                        <el-input v-model="customerResources.customerResourcesContactPosition" placeholder="请输入联系人岗位" style="width:150px;"></el-input>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即添加</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-card>
        <router-view/>
    </div>
</template>
<style scoped>

.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}
.c_item{
    flex:1;
    margin:0px 5px 15px 0;
    width: calc((100%-0px)/2); 
    min-width:calc((100% - 10px)/2);
    max-width:calc((100% - 10px)/2);
}
</style>